{% extends "layouts/base-fullscreen.html" %}

{% block title %} Login {% endblock %}

{% block content %}
<section class="vh-100">
  <div class="container py-5 h-100">
    <div class="row d-flex justify-content-center align-items-center h-100">
      <div class="col-12 col-md-8 col-lg-6 col-xl-5">
        <div class="card shadow-2-strong" style="border-radius: 1rem;">
          <div class="card-body p-4 text-center">
            <img src="{{ config.ASSETS_ROOT }}/images/logo.png" class="mb-3">
            {% if msg %}
            <div class="alert alert-danger" role="alert">
              <h4 class="alert-heading">Warning!!!</h4>
              <span>{{ msg | safe }}</span>
            </div>
            {% endif %} 
            <form role="form" method="post" action="">

              {{ form.hidden_tag() }}
              <div data-mdb-input-init class="form-outline input-group  mb-3">
                <span class="input-group-text" id="basic-addon1"><i class="fas fa-user"></i></span>
                {{ form.username(placeholder="Username", class="form-control form-control-lg") }}
              </div>

              <div data-mdb-input-init class="form-outline  input-group mb-3">
                <span class="input-group-text" id="basic-addon1"><i class="fas fa-lock"></i></span>
                {{ form.password(placeholder="Password", class="form-control  form-control-lg", type="password") }}
                <span class="input-group-text" onclick="password_show_hide();">
                    <i class="fas fa-eye" id="show_eye"></i>
                    <i class="fas fa-eye-slash d-none" id="hide_eye"></i>
                </span>
              </div>

              <button data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-lg btn-block"
                type="submit" name="login">{% if register==True %} Register {%else%} Login {%endif%}</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<script>
  function password_show_hide() {
  var x = document.getElementById("pwd_login");
  var show_eye = document.getElementById("show_eye");
  var hide_eye = document.getElementById("hide_eye");
  hide_eye.classList.remove("d-none");
  if (x.type === "password") {
    x.type = "text";
    show_eye.style.display = "none";
    hide_eye.style.display = "block";
  } else {
    x.type = "password";
    show_eye.style.display = "block";
    hide_eye.style.display = "none";
  }
}
</script>

{% endblock content %}